<!-- 通常而言，沿着曲线运动的是物体的中心点（类比 transform-origin），在这里，我们可以通过 offset-anchor 改变运动的锚点，譬如，我们希望三角形的最下方沿着曲线运动： -->

<!-- 经过实测，Can i use 上写着 offset-anchor 属性的兼容性在为 Chrome 79+、Firefox 72+，但是实际只有 Firefox 支持，Chrome 下暂时无法生效~ -->

<svg class="g-svg" width="400" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80" stroke="black" fill="transparent" />
</svg>
<div class="g-wrap">
  <div class="ball"></div>
</div>

<style>
  html,
  body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .g-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .g-wrap {
    position: relative;
    width: 400px;
    height: 160px;
    margin: auto;
    /* // outline: 1px solid #000; */
  }

  .ball {
    position: aboslute;
    width: 40px;
    height: 40px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80');
    offset-anchor: 0 100%;
    background: linear-gradient(#fc0, #f0c);
    animation: move 3000ms infinite alternate linear;
  }


  @keyframes move {
    0% {
      offset-distance: 0%;
    }

    100% {
      offset-distance: 100%;
    }
  }
</style>